<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <style>
        /* 类选择器 */
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid palevioletred;   
        }
        .happy{           
            border: 1px solid paleturquoise;
        }
        .sad{
            border: 1px solid green;
        }
        .normal{       
            border: 1px dotted purple;
        }
        .nanfeng1{         
             outline: thick ridge pink;   
        }
        .nanfeng2{         
             outline: thick ridge paleturquoise;   
        }
        .nanfeng3{         
             outline: thick ridge palegoldenrod;   
        }

    </style>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        绑定样式：
            1、class样式
                写法：class="xxx"  xxx可以是字符串、对象、数组
                    字符串写法适用于：类名不确定，要动态获取
                    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
                    数组写法适用于：要绑定多个样式，个数确定，名字确定，但不确定是否使用
            2、style样式
                :style="{fontSize:xxx}"，其中xxx是动态值
                :style="[a,b]"，其中a、b是样式对象      
     -->



    <!--准备好一个容器-->
    <div id="root">
        <!-- v-bind:   简写为  ： -->
    <!-- 绑定class样式--字符串写法   适用于：样式的类名不确定，需要动态的绑定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/>

     <!-- 绑定class样式--数组写法   适用于：要绑定的样式个数不确定、名字也不确定-->  
    <div class="basic" :class="classArr">{{name}}</div><br/><br/>

    <!-- 绑定class样式--对象写法   适用于：要绑定的样式个数确定、名字确定  但要动态决定是否使用--> 
    <div class="basic"  :class="classObject">{{name}}</div><br/><br/>

     <!-- 绑定style样式--对象写法  -->
    <div class="basic" :style="styleObj">{{name}}</div><br/><br/>
    
    <!-- 绑定style样式-- 数组写法  -->
    <div class="basic" :style="styleArr">{{name}}</div>

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    const vm =   new Vue({
        el:'#root',
        data:{
            name:'南风',
            mood:'normal' , // 字符串写法
            classArr:['nanfeng1','nanfeng2','nanfeng3'],
            classObject:{
                nanfeng1:false,
                nanfeng2:false,
            },
            styleObj:{
                fontSize:'40px',
                color:'purple',                
            },
            styleObj2:{               
                backgroundColor:'pink'
            },
            styleArr:[
                { fontSize:'20px',
                  color:'pink', 
                },
                {
                  backgroundColor:'gray'  // 注意：样式对象的key值不值随意书写，要根据具体的意思。驼峰命名
                }
            ]
        },
        methods: {
            changeMood(){ // 回调函数
                const arr = ['happy','sad','normal']
                // 生成随机数  Math.random()*3表示[0,3)之间的随机数
                const index =  Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>
</html>

